/* -------------------------------

  Thème général de l'application
   Réalisé par Fabien Nouaillat

------------------------------- */


/**
  Déclaration des variables
**/

// Palette de couleurs
@fondBody		: #eae5e5;
@fondEnTete		: #e5dddd;
@grisTHead		: #ccc;
@fondTBody		: #f8f4f4;
@rougeLien		: #b71414;
@couleurTexte	: #111;

// Chemins d'accès
@imgFolder      : '../../themes/macrise/images/';


/**
  Incorporations
**/
.arrondi(@radius: 10px) {
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
	-o-border-radius: @radius;
	border-radius: @radius;
}


/**
  Police Google Font
**/
h1, h2, nav, #en_tete, #search_engine label {
    font-family: 'Carter One', arial, serif;
}


/**
  Classes
**/
.display-none { display: none; }
.floatL { float: left; }
.floatR { float: right; }
.align-center { text-align: center; }

/**
  Règles d'imbrication
**/
body {
	background: url({@imgFolder}fond.png) repeat-y @fondBody;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: @couleurTexte;

	p, li {
		line-height: 1.6em;
	}

	a {
		text-decoration: none;
	}

	#barre {
		float: left;
		width: 260px;
		color: #ccc;
		background: url({@imgFolder}en-tete.png) no-repeat;

		> header {
		    margin: 50px 0 20px;

		    h1 {
		        text-align: center;
		    }
		}

        ul.menu {
            padding: 30px 0;

            li {
                margin: 0;
                padding: 0;
                list-style-type: none;
                line-height: 1.8em;
            }

            a {
                color: #a0a0a0;
                padding-left: 40px;
                height: 30px;
                display: block;

                &:hover {
                    color: #d3d3d3;
                }
            }

            .actif {
                display: block;
                background: url({@imgFolder}lien_menu_actif.png) no-repeat;
                color: #d3d3d3;
                width: 195px;
                padding: 5px 40px;
                height: 30px;
            }
        }

	}
	
	#breadcrumb {
	    display: table;
	    margin-top: 10px;

        li {
            display: table-cell;
            vertical-align: middle;
            margin-right: 5px;
            padding: 2px 8px;
            background-color: #777;
            color: #ccc;
            display: inline-block;
            font-size: .8em;
            font-weight: bold;
            letter-spacing: 2px;
            text-transform: lowercase;
            border: 1px solid #6f6f6f;
            .arrondi(4px);
            *float: left;

            &:hover {
                background-color: #666;
            }

            a:hover {
                color: #eee;
            }

            &:last-child:hover {
                background-color: #777;
                color: #ccc;
            }

            img {
                display: block;
            }
        }
    }
    
    #langues {
        float: right;
        margin: 10px 55px 0 0;
        
        li {
            margin-left: 3px;
            display: inline-block;
            cursor: pointer;
        }
    }

	#en_tete {
		height: 64px;
		margin-left: 260px;
		background-color: @fondEnTete;
		color: #736666;
		border-bottom: 1px solid #d7d3d3;

		p {
			float: left;
			font-size: 1.1em;
			padding: 20px 0 0 15px;
		}

		ul {
			margin: 0;
			padding-top: 17px;
			text-align: right;
			font-size: .9em;

			li {
				list-style-type: none;
				display: inline;
				margin-right: 30px;

				a {
					color: #736666;

					&:hover {
						color: @rougeLien;
					}

					img {
						margin-right: 5px;
						vertical-align: -10px;
					}
				}
			}
		}
	}

	> section {
		clear: top;
		font-size: .9em;
		padding: 50px;
		margin-left: 250px;

        article {
            margin-bottom: 60px;
            
            header {
                
                h1 {
                    margin-bottom: 20px;
                }
            }
        }
        
        #accueil_haut {
            display: table;
            width: 100%;
            margin: -20px 0 60px 0;
        }
        
        #statistiques {
            display: table;
            width: 100%;
			background-color: @fondTBody;
			border: 1px solid #e1dede;
			.arrondi(10px);
            
            div {
                display: table-cell;
                width: 25%;
                border-right: inherit;
                
                &:last-child {
                    border: none;
                }

                h2 {
                    margin: 0;
                    padding: 5px;
                    text-align: center;
                    border-bottom: 1px solid #e1dede;
                }

                ul {
                    padding: 10px;
                    font-size: .9em;
                    
                    li {
                        span {
                            float: left;
                            width: 15px;
                            margin-right: 10px;
                            text-align: right;
                            font-weight: bold;
                            color: darken(@fondTBody, 30%);
                        }
                    }
                }
            }
        }
        
        .green { color: desaturate(spin(@rougeLien, 90), 10); }
        .red { color: desaturate(@rougeLien, 10%); }
        
        #magNote {
            margin: 20px 0;
                        
            li {
                display: inline-block;
                margin-right: 5px;
                padding: 5px;
                background-color: #f9f5f4;
                text-align: center;
                border: 1px solid #ccc;
                .arrondi(10px);
                
                &:first-child {
                    vertical-align: bottom;
                    padding: 15px;
                    background-color: @fondBody;
                    border: none;
                }
            }
        }
        
        .commentaires {
            margin-top: 40px;

            h1 {
                margin-bottom: 0;
                font-size: 1.4em;
                text-align: center;
                font-weight: normal;
                color: #3f3f3f;
            }

            ul {
                background-color: #eee;
                border: 1px solid #ccc;
                .arrondi(10px);

                .commentaire {
                    display: table;
                    width: 100%;
                    border-bottom: inherit;
                    font-size: .9em;
                    color: #333;

                    .date, .message {
                        padding: 10px;
                        display: table-cell;
                        vertical-align: middle;
                    }

                    .date {
                        width: 70px;
                        text-align: center;
                        border-right: 1px solid #ccc;
                    }

                    .user {
                        display: block;
                        font-weight: bold;
                    }
                    
                    .message {
                        width: 100%;
                    }

                    &:last-child {
                        border: none;
                    }
                    
                    button {
                        width: inherit;
                        border: none;
                        background-color: inherit;
                        cursor: pointer;
                        
                        img {
                            vertical-align: middle;
                            opacity: .3;
                        }
                    }
                    
                    textarea {
                        width: 100%;
                        border: none;
                        background: inherit;
                        outline: none;
                        color: #999;
                        overflow-y: hidden;
                    }
                }
            }
        }
        
        #equipe {

            ul {
                margin-bottom: 10px;
                padding: 5px 0;
                
                li {
                    line-height: 1.8em;
                    font-size: .9em;
                }
            }
            
            img {
                padding: 10px;
                background-color: #eee;
                border: 1px solid #ccc;
                float: left;
                margin-right: 20px;
                opacity: .9;
                
                &:hover {
                    opacity: 1;
                }
            }
        }
        
        .search_field {
            padding: 2px 4px;
            color: #666;
            font-size: 1.2em;
            border-width: 1px;
            .arrondi(5px);
        }

        #infos_accueil {
            display: table-cell;
            width: 50%;
			padding: 15px;
			font-size: .9em;
			background-color: @fondTBody;
			border: 1px solid #e1dede;
			.arrondi(10px);
        }
        
         #infos_ville {
            display: table;
            width: 100%;
            margin-top: 20px;
            background-color: #eee;
        	border: 1px solid #ccc;
            .arrondi(10px);

            div {
                display: table-cell;
        		border-right: inherit;

                &:last-child {
                    border: none;
                }

                h2 {
                    margin: 0;
                    padding: 5px;
                    text-align: center;
                    border-bottom: 1px solid #ccc;
                }

                ul {
                    padding: 10px;
                    font-size: .9em;

                    li {
                        span {
                            float: left;
                            width: 15px;
                            margin-right: 10px;
                            text-align: right;
                            font-weight: bold;
                            color: darken(@fondTBody, 30%);
                        }
                    }
                }
            }
        }
        
        #infos_chasseur {
            display: table;
            margin-bottom: 30px;
            background-color: @fondTBody;
			border: 1px solid #e1dede;
			.arrondi(10px);
            
            ul {
                display: table-cell;
                
                &:first-child {
                    border-right: 1px solid #e1dede;
                }
                
                li {
                    display: table;
                                        
                    &:first-child {
                        border-bottom: 1px solid #e1dede;
                    }
                    
                    strong, span {
                        display: table-cell;
                        padding: 5px 10px;
                    }
                }    
            }
        }
        
        .singleMap {
            width: 547px;
            height: 320px;
            border: 1px solid #777;
            overflow: hidden;
        }

        #amap {
            height: 400px;
        }

        .list {
            overflow: hidden;
            margin-left: -25px;
            padding-left: 25px;
        }

        .qr {
            margin-top: 15px;
        }

        .liste_gestion {
            
		    li {
                margin-bottom: 15px;
		        
		        img {
		            vertical-align: bottom;
		            margin-right: 10px;
		        }
		    }
		}

		h1 {
			font-size: 1.6em;
			font-weight: bold;
			margin-bottom: 40px;
		}

		a {
			color: @rougeLien;
			font-weight: bold;

			&:hover {
				border-bottom: 1px dashed @rougeLien;
			}
		}

		table {
			width: 100%;
			margin-bottom: 30px;
			border: 1px solid #aaa;

			caption {
                padding: 5px;
				color: #555;
				font-size: 1.4em;
				font-weight: bold;
			}

			th, .pagination {
				padding: 7px;
				background-color: @grisTHead;
				border-bottom: 1px solid #aaa;
			}

			tr {
				background-color: @fondTBody;

			}

			.alterne {
				background-color: #e8e2e2;
			}

			td {
				padding: 7px;
			}
			
			.pagination {
			    border-top: 1px solid #aaa;
			    text-align: center;
			}
		}

		.btnNouveau {
			margin-bottom: 10px;
			float: right;

			&:hover {
				border: none;
			}
		}
	}
	
	/**
	 *	Style des composants jQuery UI
	 */
    #progressbar {
        margin-top: 10px;
        float: right;
        height: 20px;
        width: 400px;
        text-align: center;
        font-size: .5em;
        
        .ui-progressbar-value {
            background-image: url({@imgFolder}pbar-ani-red.gif);
            margin: 0;
        }
    }
    
    .ui-widget-overlay {
        opacity : .5;
        background-color: #000;
    }
    
    .ui-widget-header {
        border: none;
        background-image: none;
        background-color: #CCCCCC;
    }
    
    .ui-dialog-titlebar, .ui-dialog .ui-dialog-titlebar {
        background-color: #CCCCCC;
    }

	.ui-dialog .ui-dialog-content, #dialFormNewTask {
		background-color: #F6F3F3;
	}

	.ui-widget-content {
		border : none;
	}

	.ui-dialog {
		padding: 0;
		background-color: #F6F3F3;
		border: 0;
	}

	.buttonRight {
		float: right;

		p {
			line-height: 1em;
		}
	}

	#buttonHistorique {
		float: right;
		margin-bottom: -20px;
	}

	#dialogFormNouvelleTache {

		p {
			margin-bottom : 10px;
		}
	}

	#slider {
		border : 1px solid #DDD;
	}

	/* Formulaire de validation */
	.niceform {

		fieldset {
			background-image: none;
			background-color: #F6F3F3;
			border: none;
		}
	}
}

body#popin {
    background: red;
}

#maps { width:100%;}

form .return {display:none;}